<template>
    <!-- 宠物分类导航栏 -->
    <div class="classify-container">
        <ul class="nav-list">
            <li v-for="item in navItems" :key="item.name" :class="{ active: currentRoute === item.path }"
                @click="navigateTo(item.path)">
                {{ item.label }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const currentRoute = ref(router.currentRoute.value.path);
const navItems = [
    { path: "/pets-list/all", name: 'PetsAll', label: "全部" },
    { path: "/pets-list/breed-jingmao", name: 'PetsGoloden', label: "狗" },
    { path: "/pets-list/breed-lihua", name: 'PetsCatLi', label: "猫" },
    { path: "/pets-list/breed-other", name: 'PetsOther', label: "其他" },
]

// 导航到对应页面  
const navigateTo = (path) => {
    router.push(path); // 跳转到对应路由  
    currentRoute.value = path; // 更新当前路由  
}; 
</script>

<style scoped>
.classify-container {
    width: 1200px;
    height: 50px;
    /* 与导航栏的间距 */
    margin-top: 50px;
    margin-bottom: 20px;
    background-color: #f4f4f4;
}
.nav-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; 
}
.nav-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    font-size: 15px;
    padding: 0 15px;
    cursor: pointer;
    transition: color 0.3s ease; 
}
.nav-list li.active {
    color: #055B5C; 
}
.nav-list li:hover {
    color: #055B5C; 
}
</style>